<template>
  <div class="register-container">
    <div class="register-box">
      <h2>注册账号</h2>
      
      <el-form :model="registerForm" :rules="rules" ref="registerForm">
        <el-form-item prop="email">
          <el-input 
            v-model="registerForm.email"
            placeholder="请输入邮箱"
            prefix-icon="el-icon-message"
          />
        </el-form-item>
        
        <el-form-item prop="phone">
          <el-input 
            v-model="registerForm.phone"
            placeholder="请输入手机号"
            prefix-icon="el-icon-phone"
          />
        </el-form-item>

        <el-form-item prop="password">
          <el-input 
            v-model="registerForm.password"
            type="password"
            placeholder="请输入密码"
            prefix-icon="el-icon-lock"
            show-password
          />
        </el-form-item>

        <el-form-item prop="confirmPassword">
          <el-input 
            v-model="registerForm.confirmPassword"
            type="password"
            placeholder="请确认密码"
            prefix-icon="el-icon-lock"
            show-password
          />
        </el-form-item>

        <el-button type="primary" class="register-button" @click="handleRegister">
          注册
        </el-button>

        <div class="agreement-text">
          注册即表示您同意并愿意遵守
          <router-link to="/agreement" class="link">用户协议</router-link>
          与
          <router-link to="/privacy" class="link">隐私政策</router-link>
        </div>
      </el-form>

      <div class="divider">
        <span>或使用以下方式注册</span>
      </div>

      <div class="third-party-login">
        <el-tooltip content="QQ登录" placement="top">
            <div class="login-icon qq" @click="thirdPartyLogin('qq')">
              <i class="fab fa-qq"></i>
            </div>
          </el-tooltip>
          <el-tooltip content="微信登录" placement="top">
            <div class="login-icon wechat" @click="thirdPartyLogin('wechat')">
              <i class="fab fa-weixin"></i>
            </div>
          </el-tooltip>
          <el-tooltip content="Gitee登录" placement="top">
            <div class="login-icon gitee" @click="thirdPartyLogin('gitee')">
              <svg class="gitee-icon" viewBox="0 0 1024 1024" width="20" height="20">
                <path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#C71D23"></path>
                <path d="M771.168 455.136H495.2a20.8 20.8 0 0 0-20.864 20.864v65.728c0 11.52 9.344 20.864 20.864 20.864h171.072c11.52 0 20.864 9.344 20.864 20.864v13.184c0 37.568-30.72 68.288-68.288 68.288H370.688a20.8 20.8 0 0 1-20.864-20.864V361.408c0-37.568 30.72-68.288 68.288-68.288h352.992c11.52 0 20.864-9.344 20.864-20.864v-65.728a20.8 20.8 0 0 0-20.864-20.864H418.112c-112.64 0-204.8 92.16-204.8 204.8v392.832c0 11.52 9.344 20.864 20.864 20.864h345.216c93.952 0 171.072-77.12 171.072-171.072V476c0-11.52-9.344-20.864-20.864-20.864z" fill="#FFFFFF"></path>
              </svg>
            </div>
          </el-tooltip>
          <el-tooltip content="Github登录" placement="top">
            <div class="login-icon github" @click="thirdPartyLogin('github')">
              <i class="fab fa-github"></i>
            </div>
          </el-tooltip>
      </div>

      <div class="login-link">
        已有账号？<router-link to="/login">立即登录</router-link>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const registerForm = reactive({
  email: '',
  phone: '',
  password: '',
  confirmPassword: ''
})

const rules = {
  email: [
    { required: true, message: '请输入邮箱地址', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: '请再次输入密码', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (value !== registerForm.password) {
          callback(new Error('两次输入密码不一致'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ]
}

const handleRegister = async () => {
  try {
    // 这里添加注册逻辑
    console.log('注册信息:', registerForm)
    // 注册成功后跳转到登录页
    router.push('/login')
  } catch (error) {
    console.error('注册失败:', error)
  }
}
</script>

<style scoped>
.register-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  width: 100vw;
  background-color: #f5f5f5;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
}

.register-box {
  width: 400px;
  padding: 40px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  margin: 20px auto;
}

h2 {
  text-align: center;
  margin-bottom: 30px;
  color: #333;
}

.register-button {
  width: 100%;
  margin-top: 20px;
}

.divider {
  display: flex;
  align-items: center;
  margin: 20px 0;
  color: #999;
}

.divider::before,
.divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #ddd;
}

.divider span {
  padding: 0 15px;
  font-size: 14px;
}

.third-party-login {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 20px;
  
  .login-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    background: var(--el-bg-color);
    border: 1px solid var(--el-border-color-lighter);
    
    i {
      font-size: 24px;
    }
    
    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
    
    &.qq {
      color: #12B7F5;
      &:hover {
        background: #12B7F5;
        color: white;
      }
    }
    
    &.wechat {
      color: #07C160;
      &:hover {
        background: #07C160;
        color: white;
      }
    }
    
    &.gitee {
      color: #C71D23;
      &:hover {
        background: #C71D23;
        color: white;
      }
    }
    
    &.github {
      color: #24292F;
      &:hover {
        background: #24292F;
        color: white;
      }
    }
    
    .gitee-icon {
      width: 24px;
      height: 24px;
    }
  }
}

.login-link {
  text-align: center;
  margin-top: 20px;
  font-size: 14px;
}

.login-link a {
  color: #409eff;
  text-decoration: none;
}

.login-link a:hover {
  text-decoration: underline;
}

.agreement-text {
  margin-top: 12px;
  font-size: 12px;
  color: #666;
  text-align: center;
}

.agreement-text .link {
  color: #409eff;
  text-decoration: none;
}

.agreement-text .link:hover {
  text-decoration: underline;
}
</style>
